<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮组</title>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script src="../../js/jquery-1.11.2.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
</head>
<style>
    body{
        padding: 100px;
    }

</style>
<body>
<div>
    <button class="btn btn-default">首页</button>
    <button class="btn btn-default">HTML</button>
    <button class="btn btn-default">JAVA</button>
    <button class="btn btn-default">Jquery</button>
</div>
<hr>
<div class="btn-group">
<button class="btn btn-default">首页</button>
<button class="btn btn-default">HTML</button>
<button class="btn btn-default">JAVA</button>
<button class="btn btn-default">Jquery</button>
    <div class="btn-group"><!--class:btn-group 同一行 用dropdown会在下一行-->
        <a href="" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            主流的javascript库
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">123</a></li>
            <li><a href="#">123</a></li>
            <li><a href="#">123</a></li>
            <li><a href="#">123</a></li>
            <li><a href="#">123</a></li>
        </ul>
    </div>
</div>
<hr>

    <div class="btn-group-vertical">
        <button class="btn btn-default">首页</button>
        <button class="btn btn-default">HTML</button>
        <button class="btn btn-default">JAVA</button>
        <button class="btn btn-default">Jquery</button>
        <div class="btn-group"><!--class:btn-group 同一行 用dropdown会在下一行-->
            <a href="" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                主流的javascript库
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">123</a></li>
                <li><a href="#">123</a></li>
                <li><a href="#">123</a></li>
                <li><a href="#">123</a></li>
                <li><a href="#">123</a></li>
            </ul>
        </div>
    </div>
<hr>
<div class="btn-group btn-group-justified"><!--等分-->
    <a class="btn btn-default">首页</a>
    <a class="btn btn-default">HTML</a>
    <a class="btn btn-default">JAVA</a>
    <a class="btn btn-default">Jquery</a>
</div>
<hr>
<div class="btn-group">
    <a href="" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    按钮下拉菜单
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">123</a></li>
        <li><a href="#">123</a></li>
        <li><a href="#">123</a></li>
        <li><a href="#">123</a></li>
        <li><a href="#">123</a></li>
    </ul>
</div>
<hr>
<div class="btn-group dropup">
    <a href="" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        按钮向上菜单
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">123</a></li>
        <li><a href="#">123</a></li>
        <li><a href="#">123</a></li>
        <li><a href="#">123</a></li>
        <li><a href="#">123</a></li>
    </ul>
</div>
</body>
</html>
